// base
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
// less
import './index.less'
import ShowEmpty from '../show-empty'
import tool from '../../../util/tool'

class ScreenCardItems extends Component {
  static defaultProps = {
    data: []
  }
  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
  }

  componentWillUnmount() {
    // onUnload
  }

  onClickCard = e => {
    let { titleindex, cardindex } = e.currentTarget.dataset
    this.props.onTap(titleindex, cardindex)
  }

  onClickCardArea = e => {
    let { cardindex } = e.currentTarget.dataset
    this.props.onTapArea(cardindex)
  }

  clickOrder = () => {}

  onPostJob = tool.throttle(() => {
    this.props.onPostJob()
  })

  render() {
    const { data, showTitle, role, pagetype } = this.props
    return (
      <View className="ScreenCardItems_id85255">
        {showTitle &&
          data.length &&
          data.map((item, index) => {
            return (
              <View key={index} className="screen-card-item" onClick={this.clickOrder}>
                {item.name && <View className="screen-card-title">{item.name}</View>}
                <View className="card-container">
                  {item.data &&
                    item.data.length > 0 &&
                    item.data.map((itemCard, indexCard) => {
                      return (
                        <View
                          className={`screen-card-border ${
                            role === 'personal' || item.name === '学历' || pagetype
                              ? ''
                              : 'screen-card-category'
                          } ${itemCard.active ? 'active' : ''}`}
                          key={indexCard}
                          data-cardindex={indexCard}
                          data-titleindex={index}
                          onClick={this.onClickCard}
                        >
                          {role === 'personal'
                            ? itemCard.name
                            : `${itemCard.name}${
                                itemCard.category ? ' - ' + itemCard.category : ''
                              }`}
                        </View>
                      )
                    })}
                </View>
              </View>
            )
          })}
        {showTitle && !data.length && (
          <View className="screen-go-post">
            <ShowEmpty noSubText />
            <View className="go-post" onClick={this.onPostJob}>
              去发布岗位
            </View>
          </View>
        )}
        {!showTitle && (
          <View className="card-container" onClick={this.clickOrder}>
            {data.map((item, index) => {
              return (
                <View
                  key={index}
                  className={`screen-card-border ${item.active ? 'active' : ''}`}
                  data-cardindex={index}
                  onClick={this.onClickCardArea}
                >
                  {item.name}
                </View>
              )
            })}
          </View>
        )}
      </View>
    )
  }
}

export default ScreenCardItems
